<!DOCTYPE html>
<html lang="zh">
<head>
    <title>我的第一个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <div>----------------------------vm绑定属性--------------------------------</div>
    <div id="d1">{{a}}
    </div>
    <br/>  <br/>
    <div>----------------------------属性冻结--------------------------------</div>
    <div id="d2">{{foo}}
        <p v-once>这个将不会改变:{{msg}}</p>
    </div>
    <div id="d2-2">
        <p v-once>这个将不会改变:{{msg}}</p>
    </div>
    <br/>  <br/>
    <div>---------------------------前缀$绑定属性---------------------------------</div>
    <div id="d3">{{drink}}
    </div>

    <br/>  <br/>
    <div>--------------------------vue初始化测试----------------------------------</div>
    <div id="d4">{{drink}}
    </div>
    <br/>  <br/>
    <div>----------------------------v-html等价{{}}--------------------------------</div>
    <div id="d5">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    </div>
    <br/>  <br/>

    <div>------------------------Attribute------------------------------------</div>
    Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
    <div id="d6" v-bind:id="dynamicId">
        <button v-bind:disabled="isButtonDisabled">Button</button>
    </div>
    <br/>  <br/>
    <div>------------------------使用javaScript表达式------------------------------------</div>
    <div id="d7">
    {{ number + 1 }}
    <br/>
    {{ ok ? 'YES' : 'NO' }}
    <br/>
    {{ message.split('').reverse().join('') }}
    </div>




</body>
<script>
    //1
    //定义一个数据对象
    var  data = { a:1 }
    //将该对象加入到vue实例中
    var vm = new Vue({
        el:"#d1",
        data: data
    })

    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    vm.a == data.a

    // 设置 property 也会影响到原始数据
    vm.a = 2
    console.log('data.a = '+data.a) //data.a 变成2了


    //2
    //这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
    var obj = { foo:'beer'}
    Object.freeze(obj)
    var vm2 = new Vue({
        el:"#d2",
        data:obj
    })
    //vm2.foo = 'cola' //不能像上面一样vm2.foo了，报错了
    //vm2.foo = obj.foo

    /**通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：*/
    console.log('obj.foo = '+ obj.foo) //data.a 变成2了
    var obj2 = { msg:'肉末蒸蛋'}
    var vm21 = new Vue({
        el:"#d2-2",
        data:obj2
    })
    vm.msg == data.msg
    vm.msg = "肉末茄子"

    //3
    //除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：
    var data3 = { drink:"可口可乐"}
    var vm3 = new Vue({
        el:"#d3",
        data:data3
    })
    vm3.$data === data3
    vm3.$el === document.getElementById('d3')
    vm3.$watch('drink',function(newVaule,oldValue){

        //这个回调将在vm3.drink改变后调用
        console.log("vue其他一些绑定实例property的方法")
    })
    vm3.$data.drink = "百事可乐"  //这里修改值后，标签上显示的值由"可口可乐"变成"百事可乐"了


    //每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、
    //将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
    /**
     * 不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 
     * vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一
     * 直向上级词法作用域查找，直至找到为止，
     * 经常导致 Uncaught TypeError: Cannot read property of undefined 
     * 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
     */
    new Vue({
        el:'#d4',
        data: { drink : "柠檬水" },
        created:function(){
        //this指向vm实例
        console.log("drink is:" + this.drink) //drink is:柠檬水
        }
    })

    //原始 HTML
    new Vue({
        el:'#d5',
        data: { rawHtml : "柠檬水" }
    })

    //Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令
    new Vue({
        el:'#d6',
        data: { isButtonDisabled : true }
    })

    //使用 JavaScript 表达式
    new Vue({
        el:'#d7',
        data: { number : 1023, ok:true,message:"welcome to jian3 wu xia wrold"}
    })





</script>
</html>